<template>
    <div class="g-card" style="margin-top: 40px;height: 580px;">
        <el-row :gutter="20">
            <el-col :span="16">
                <div class="border-r6" style="height: 445px;">
                    <imgView src=""></imgView>
                </div>
                <div class="title-16-left font-text-al-l omit" style="margin-top: 26px;">111111111111111111111</div>
                <div class="font-content font-text-al-l omit-2" style="margin-top:14px;">22222222222222222</div>
            </el-col>
            <el-col :span="8">
                <div class="titlebg">品牌聚焦</div>
                <div style="height: 500px;padding-top:16px ;">
                    <div style="height: 25%;" v-for="(item,i) in list1" :key="i" class="cursor-p">
                        <div class="title-16-left font-text-al-l omit">{{ item.title }}</div>
                        <div class="font-content font-text-al-l omit-3" style="margin-top:8px;">{{ item.blurb }}</div>
                        <div style="color: red;text-align: right;">详情</div>
                    </div>                                                         
                </div>
            </el-col>
        </el-row>
    </div>
    <Card1 title="企业故事" :more="true" @moreClick="" style="margin-top:20px;">
        <template v-slot:main1>
            <div style="height: 388px;">
                <div style="height: 162px;margin-top:18px;">
                    <el-row :gutter="20" style="height: 100%;">
                        <el-col :span="6">
                            <div class="border-r6" style="height: 162px;">
                                <imgView src=""></imgView>
                            </div>
                        </el-col>
                        <el-col :span="9">
                            <div class="g-card-1 cursor-p" style="height: 162px;">
                                <div class="title-16-left font-text-al-l omit">1111111111111</div>
                                <div class="font-content font-text-al-l omit-3" style="margin-top:8px;height: 70px;">2222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222</div>
                                <div style="color: red;text-align: right;">详情</div>
                            </div>
                        </el-col>
                        <el-col :span="9">
                            <div class="g-card-1 cursor-p" style="height: 162px;">
                                <div class="title-16-left font-text-al-l omit">1111111111111111</div>
                                <div class="font-content font-text-al-l omit-3" style="margin-top:8px;height: 70px;">22222222222222222</div>
                                <div style="color: red;text-align: right;">详情</div>
                            </div>
                        </el-col>
                    </el-row>
                </div>
                <div style="height: 162px;margin-top:20px;">
                    <el-row :gutter="20" style="height: 100%;">
                        <el-col :span="6">
                            <div class="border-r6" style="height: 162px;">
                                <imgView src=""></imgView>
                            </div>
                        </el-col>
                        <el-col :span="9">
                            <div class="g-card-1 cursor-p" style="height: 162px;">
                                <div class="title-16-left font-text-al-l omit">1111111111111</div>
                                <div class="font-content font-text-al-l omit-3" style="margin-top:8px;height: 70px;">2222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222</div>
                                <div style="color: red;text-align: right;">详情</div>
                            </div>
                        </el-col>
                        <el-col :span="9">
                            <div class="g-card-1 cursor-p" style="height: 162px;">
                                <div class="title-16-left font-text-al-l omit">1111111111111111</div>
                                <div class="font-content font-text-al-l omit-3" style="margin-top:8px;height: 70px;">22222222222222222</div>
                                <div style="color: red;text-align: right;">详情</div>
                            </div>
                        </el-col>
                    </el-row>
                </div>
                <div class="flex-align flex-j-c " style="padding-top: 20px;">
                    <div class="indicationPoint-1">
                        <div v-for="(item,i) in list2" :key="i" :class="bannerIndex2 == i?'item1':'item2'"></div>
                    </div>
                </div>
            </div>
        </template>
    </Card1>
    <Card1 title="品牌镜观" :more="true" @moreClick="" style="margin-top:20px;">
        <template v-slot:main1>
            <div style="height: ;">
                <div style="height: 162px;margin-top:18px;">
                    <el-row :gutter="20" style="height: 100%;">
                        <el-col :span="6">
                            <div class="border-r6" style="height: 162px;">
                                <imgView src=""></imgView>
                            </div>
                        </el-col>
                        <el-col :span="6">
                            <div class="border-r6" style="height: 162px;">
                                <imgView src=""></imgView>
                            </div>
                        </el-col>
                        <el-col :span="6">
                            <div class="border-r6" style="height: 162px;">
                                <imgView src=""></imgView>
                            </div>
                        </el-col>
                        <el-col :span="6">
                            <div class="border-r6" style="height: 162px;">
                                <imgView src=""></imgView>
                            </div>
                        </el-col>
                    </el-row>
                </div>
                <div class="flex-align flex-j-c " style="padding: 20px 0;">
                    <div class="indicationPoint-1">
                        <div v-for="(item,i) in list3" :key="i" :class="bannerIndex3 == i?'item1':'item2'"></div>
                    </div>
                </div>
            </div>
        </template>
    </Card1>
    <div class="MarT back-fff" >
        <adImgView src="" @click="proxy.$comJs.openUrl()"></adImgView>
    </div>
    <Card1 title="" :more="false" style="margin-top:20px;">
        <template v-slot:img>
            <div class="navs" style="width: 79%;">
                <div class="navsItems navsItem" v-for="(item,i) in navs" :key="i" @click="navClick(i)">
                    <div class="omit" :style="navsIndex==i?'color:#D10B00;':'color:#333;'">{{ item.name }}</div>
                    <div :class="navsIndex==i?'line1':'line2'"></div>
                </div>
            </div>
        </template>
        <template v-slot:main1>
            <div style="margin-top: 10px;height: 530px;">
                <el-row :gutter="20">
                    <el-col :span="16">
                        <div class="border-r6" style="height: 445px;">
                            <imgView src=""></imgView>
                        </div>
                        <div class="title-16-left font-text-al-l omit" style="margin-top: 26px;">111111111111111111111</div>
                        <div class="font-content font-text-al-l omit-2" style="margin-top:14px;">22222222222222222</div>
                    </el-col>
                    <el-col :span="8">
                        <div style="height: 500px;padding-top:16px ;">
                            <div style="height: 25%;" v-for="(item,i) in list1" :key="i" class="cursor-p">
                                <div class="title-16-left font-text-al-l omit">{{ item.title }}</div>
                                <div class="font-content font-text-al-l omit-3" style="margin-top:8px;">{{ item.blurb }}</div>
                                <div style="color: red;text-align: right;">详情</div>
                            </div>                                                         
                        </div>
                    </el-col>
                </el-row>
            </div>
        </template>
    </Card1>
    <div class="MarT back-fff" >
        <adImgView src="" @click="proxy.$comJs.openUrl()"></adImgView>
    </div>
</template>

<script setup>
import { ref,reactive, onMounted,getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();
import CryptoJS from 'crypto-js';
import { useRoute, useRouter } from "vue-router";
const Router = useRouter();
import Card1 from '@/view/components/card1.vue';
// // 路由参数
const nav = proxy.$comJs.decrypt(
    Router.currentRoute.value.query.ob
).nav
// 获取栏目
const childlm=()=>{
    console.log('专题栏目传参',nav)
}
childlm()
// 品牌聚焦
const list1 = ref([])
const getList1=()=>{
    list1.value = [
        {title:'1111111111111111111111111111111111111111111111111111111111111111111111111111111',blurb:'222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222'},
        {title:'1111111111111111111111111111111111111111111111111111111111111111111111111111111',blurb:'222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222'},
        {title:'1111111111111111111111111111111111111111111111111111111111111111111111111111111',blurb:'222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222'},
        {title:'1111111111111111111111111111111111111111111111111111111111111111111111111111111',blurb:'222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222'},
    ]
}
getList1()
// 企业故事
const bannerIndex2 = ref(0)
const list2 = ref([])
const getList2=()=>{
    list2.value = [
        {title:'1111111111111111111111111111111111111111111111111111111111111111111111111111111',blurb:'222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222'},
        {title:'1111111111111111111111111111111111111111111111111111111111111111111111111111111',blurb:'222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222'},
        {title:'1111111111111111111111111111111111111111111111111111111111111111111111111111111',blurb:'222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222'},
        {title:'1111111111111111111111111111111111111111111111111111111111111111111111111111111',blurb:'222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222'},
    ]
}
getList2()
// 品牌镜观
const bannerIndex3 = ref(0)
const list3 = ref([])
const getList3=()=>{
    list3.value = [
        {title:'1111111111111111111111111111111111111111111111111111111111111111111111111111111',blurb:'222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222'},
        {title:'1111111111111111111111111111111111111111111111111111111111111111111111111111111',blurb:'222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222'},
        {title:'1111111111111111111111111111111111111111111111111111111111111111111111111111111',blurb:'222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222'},
        {title:'1111111111111111111111111111111111111111111111111111111111111111111111111111111',blurb:'222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222'},
    ]
}
getList3()
// 品牌访谈、品牌案例、品牌舆情
const navsIndex = ref(0)
const navs = ref([
    {name:'品牌访谈'},{name:'品牌案例'},{name:'品牌舆情'}
])
const navClick = (i) =>{
    navsIndex.value = i
}
</script>

<style lang='less' scoped>
    .titlebg{
        width: 160px;
        height: 40px;
        background: url('@/assets/img/title-tip4.png');
        background-size: 100% 100%;
        font-size: 18px;
        color: #fff;
        line-height: 40px;
        padding-left: 30px;
    }
    .navs{
        display: flex;
        .navsItem{
        width: 80px;
        height: 35px;
        color: #333333;
        font-size: 16px;
        position: relative;
        line-height: 35px;
        cursor: pointer;
        text-align: center;
        margin-right: 48px;
        .line1{
            width: 100%;
            height: 4px;
            background: #D10B00;
            position: absolute;
            bottom: 0;
            left: 0;
        }
        .line2{
            width: 80%;
            height: 4px;
            background: rgba(0,0,0,0);
            position: absolute;
            bottom: 0;
            left: 0;
        }
        }
    }
</style>
